import React, { useEffect, useMemo, useState } from "react";
import { Menu } from "antd";
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import styles from './index.mudule.less'

const icon = {
    'UserOutlined': <UserOutlined />,
    'LaptopOutlined': <LaptopOutlined />,
    'NotificationOutlined': <NotificationOutlined />,
}

const SiderMenu = (props) => {
    const {
        theme,
        onMenuItemClick,
        menus,
        pathname
    } = props;
    const [selectedKeys, setSelectedKeys] = useState('home');
    const [openKeys, setOpenKeys] = useState(['sub1']);

    useEffect(() => {
        if (pathname && pathname.startsWith('/portal/')) {
            setSelectedKeys(pathname.replace('/portal/', ''))
        }
    }, [pathname])

    function getMenusItemInfo(menus, keyPath) {
        const [key1, key2] = keyPath;
        const item = menus.find(item => item.key === key2)
        return item.children.find(item => item.key === key1)
    }

    function handleMenuItemClick(info) {
        setSelectedKeys(info.key)
        let menusItemInfo = getMenusItemInfo(menus, info.keyPath)
        onMenuItemClick(info, menusItemInfo)
    }

    function handleOpenChange(openKeys) {
        setOpenKeys(openKeys)
    }

    return (
        <Menu
            className={styles.menu}
            theme={theme}
            mode="inline"
            selectedKeys={selectedKeys} //初始选中的菜单项 key 数组
            openKeys={openKeys} //初始展开的 SubMenu 菜单项 key 数组
            onClick={handleMenuItemClick}
            onOpenChange={handleOpenChange}
            items={menus}
        />
    );
};

export default SiderMenu